<template>
  <div v-if="show">
    <h1>我是父组件</h1>
    <button @click="CpnUpdate">更新</button>
    <Child />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  getCurrentInstance,
  ref
} from 'vue'
import Child from 'components/Child.vue'

export default defineComponent({
  components: { Child },
  name: 'App',
  setup() {
    const show = ref(true)
    const { proxy: _this } = getCurrentInstance()
    console.log('setup')
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
    const CpnUpdate = () => {
      // _this.$forceUpdate()
      // show.value = false
      _this.$Unmount()
    }
    return {
      CpnUpdate,
      show
    }
  }
})
</script>

<style scoped>
</style>